<template>
  <div class="newscard" @click="routerTo(`/article/${props.articleId}`)" v-if="loading">
    <el-skeleton animated :loading="loading">
      <template #template>
        <el-skeleton-item class="card-pic" />
        <el-skeleton-item variant="h1" />
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="p" />
        <el-skeleton-item variant="h1" style="width: 30%;margin-top: 20px;" />
      </template>
    </el-skeleton>
  </div>
  <div class="newscard" @click="routerTo(`/article/${props.articleId.id}`)" v-show="!loading">
    <div class="card-pic" :style="{ backgroundImage: 'url(' + computedImageUrl + ')' }">
      <div class="card-gold" v-if="detail.gold"></div>
    </div>
    <div class="big-title" v-html="detail.title">
    </div>
    <div v-if="showDetail" class="card-disc">
      <p v-html="detail.brief"></p>
    </div>
    <div v-else="showDetail" class="card-empty">
      <p>暂无内容</p>
    </div>
    <div class="card-tail">
      <div class="card-author">
        作者：{{ detail.author }}
      </div>
      <div class="card-tag">
        <div class="pound">#</div>
        {{ detail.keyword }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import getArticleCard from '@/api/getArticleCard'
import { userinfo } from '@/stores/counter'

const defaultImages = {
  1: 'default-image-1.jpg', // 示例图片 URL
  2: 'default-image-2.jpg',
  // ... 其他类别的默认图片
};

const computedImageUrl = computed(() => {
  return detail.coverUrl || 'https://files.oaiusercontent.com/file-AxBndfv58nUrIKhY1E4plFCw?se=2024-01-05T04%3A12%3A20Z&sp=r&sv=2021-08-06&sr=b&rscc=max-age%3D31536000%2C%20immutable&rscd=attachment%3B%20filename%3D6ea9b632-d912-4e71-af2a-a5c84732fd89.webp&sig=lk0a0YIGG%2BOT4eGtfueHj37nZS1e4HslMCaKaBly58U%3D';
});

const detail = reactive({
  author: '',
  coverUrl: '',
  brief: '',
  title: '',
  coverId: 0,
  pic: '' as any,
  gold: false,
  keyword:'未知来源',
})
const { singleCard, singlePic } = getArticleCard();

const router = useRouter()
const user = userinfo()
const loading = ref(true)
const showDetail = computed(()=> {
  return detail.brief!=''
})

const routerTo = (path: string) => {
  router.push(path)
}

const props = defineProps(['articleId'])

// const picUrl = computed(() => {
//   return `/Uploads/${detail.pic.file}`
// })

const picUrl = props.articleId.coverUrl

function renewInfo() {
  detail.author = props.articleId.author
  detail.coverUrl = props.articleId.coverUrl
  detail.title = props.articleId.title
  detail.brief =  props.articleId.summary
  // console.log(detail)
  // detail.author = user.details[props.articleId].author
  // detail.brief = user.details[props.articleId].contentRes.replaceAll('&nbsp;','').substring(0, 90)
  // detail.title = user.details[props.articleId].avatar
  // detail.coverId = user.details[props.articleId].coverId
  // detail.gold = user.details[props.articleId].isGoldModal
  // if(user.details[props.articleId].keywords.length!=0) {
  //   for(let item of user.details[props.articleId].keywords) {
  //     if(item!="金牌案例") {
  //       detail.keyword = item;
  //       break;
  //     }
  //   }
  // }
}

function renewAvatar() {
  // detail.pic = user.pics[detail.coverId]
  detail.pic = props.articleId.coverUrl
}

const loadData = async () => {
  loading.value = true
  // await singleCard(props.articleId)
  renewInfo()
  // await singlePic(detail.coverId)
  renewAvatar()
  loading.value = false
}

onMounted(async () => {
  if (!user.details[props.articleId]) {
    await loadData()
    return
  }
  renewInfo()
  renewAvatar()
  loading.value = false
})

watch(() => props.articleId, async (newQuestion, oldQuestion) => {
  // await singleCard(newQuestion)
  renewInfo()
  // await singlePic(detail.coverId)
  renewAvatar()
  loading.value = false
})
</script>

<style scoped> 
::v-deep .highlight {
    color: #f59009;
}
.card-gold {
   position: absolute;
   width: 40px;
   height: 40px;
   left: 10px;
   top: 90px;
   font-size: xx-large;
   background-image: url(/assets/imgs/gold.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   z-index: 999;
   margin-top: -78px;
 }

 .newscard {
   width: 336px;
   height: 462px;
   margin: 25px;
   padding: 30px;
   /* background-color: red; */
   background-color: #fcfafe;
   box-shadow: #fff6ed 6px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   transition: box-shadow 0.5s ease;
   cursor: pointer;
 }

 .newscard:hover {
   box-shadow: 6px 20px 7px #F59009;
 }

 .card-pic {
   /* background-color: blue; */
   width: 100%;
   height: 200px;
   border-radius: 10px;
   /* background-image: v-bind(`url(${picUrl})`); */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
 }

 .big-title {
   font-weight: 700;
   font-size: 20px;
   margin: 20px 0;
   word-wrap: break-word;
 }

 .card-disc,.card-empty {
   width: 100%;
   background-color: #f3f1f1;
   height: 100px;
   border-radius: 10px;
   padding: 8px;
   font-size: 13px;
   color: #988c88;
   overflow: hidden;
 }

 .card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .card-disc>p::after {
   content: "......";
   /* 伪元素内容为省略号 */
   padding-left: 1px;
   /* 留出省略号的空间，根据实际情况调整 */
 }

 .card-tail {
   width: 100%;
   height: 50px;
   margin-top: auto;
   display: flex;
   align-items: center;
   /* background-color: green; */
   padding: 8px;
   font-size: 14px;
   color: #988c88;
 }

 .card-author {
   flex-grow: 1;
 }

 .card-tag {
   display: flex;
   align-items: center;
   min-width: 30%;
 }

 .pound {
   height: 23px;
   width: 23px;
   margin: auto;
   background: linear-gradient(to bottom right, #f9bd20, #f83f02);
   border-radius: 999px;
   margin-right: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #a96837;
 }
</style>